<template>
<div id="container" class="text-white text-sm bg-primary-300 min-h-screen pb-4">
    <header>
        <Header />
    </header>
    <div id="main" class="bg-primary-300 p-12 text-back">
        <div class="grid grid-cols-3 gap-3">
            <div v-for="item in info" :key="item.id" class="bg-white p-4 rounded shadow">
                <div class="text-4xl text-center text-black">{{item.card_name}}</div>
               <div class="text-4xl.text-center text-center text-black">￥{{item.card_price}}元</div>
               <button class="bg-primary-500 px-4 py-2 rounded text-black" data-pay_type="alipay" @click="pay(item.id)">购买</button>
            </div>
        </div>
    </div>
    <footer>
        <Footer />
    </footer>
</div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useUserStore } from '@/stores/index'
import cardApi from '@/api/cardApi'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const info=ref([])
const pay=async(id)=>{
    const res=await cardApi.pay(id)
    
}
const fatchInfo=async()=>{
    const res=await cardApi.getMemberCards()
    info.value=res.results
}
onMounted(()=>{
    fatchInfo()
})


</script>

<style lang="sass">

</style>
